<template>
  <div class="bar-chart-07 chart" ref="barChart07"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart07 = ref(null);
const echarts = inject("$echarts");

const xAxisData = ["总人数", "焦煤电", "其他", "纺织", "新能源", "新型铝材", "其他门类"];

const option = {
  backgroundColor: "#0D264D",
  compCode: "C202310030",
  tooltip: {
    trigger: "axis",
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
    axisPointer: {
      type: "shadow",
    },
    formatter: function (params) {
      var tar = params[1];
      return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    splitLine: { show: false },
    axisLabel: {
      color: "#fff",
      rotate: 45,
      fontSize: 16,
    },
    axisTick: "none",
    data: xAxisData,
  },
  yAxis: {
    name: "单位： 人",
    nameTextStyle: {
      color: "#fff",
      padding: 10,
      fontSize: 14,
    },
    type: "value",
    axisLabel: {
      show: false,
    },
    splitLine: {
      // 坐标轴在 grid 区域中的分隔线
      lineStyle: {
        // 分隔线
        type: "dashed", // 线的类型
        color: "grey", // 分隔线颜色
      },
    },
  },
  series: [
    {
      name: "Placeholder",
      type: "bar",
      stack: "Total",
      barWidth: 60,
      itemStyle: {
        borderColor: "transparent",
        color: "transparent",
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
      },
      data: [0, 1700, 1400, 1200, 400, 100, 0],
    },
    {
      name: "人数",
      type: "bar",
      stack: "Total",
      barWidth: 60,
      label: {
        show: true,
        position: "top",
        color: "#fff",
        fontSize: 16,
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: "#33B9EE",
            },
            {
              offset: 1,
              color: "#CBF7FB",
            },
          ]),
        },
      },
      data: [2900, 1200, 300, 200, 900, 400, 100],
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(barChart07.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
